<template>
  <div class="main">
    <div class="content">
      <div v-html="content"></div>
    </div>
    <div class="bottom" v-if="userInfo.identity === 'USER'">
      <!-- 根据状态及是否参加过活动显示按钮文字 -->
      <!-- "活动状态：NOT_START.未开始,ON_REGISTER.报名中,REGISTER_END.报名结束,ONGOING.进行中,ACTIVITY_END.活动结束" -->

      <!-- 立即报名/已报名成功/活动已结束 -->
      <!-- <button v-if="status === 'NOT_START'">活动未开始</button>
      <button v-if=" !isPart&&status === 'ON_REGISTER'" class="onlyBtn" @click="goApply(id)">立即报名</button>
      <button v-if="status === 'REGISTER_END'">报名已结束</button>
      <button v-if="status === 'ACTIVITY_END'">活动已结束</button>
      <button v-if="status === 'ONGOING'">活动进行中</button>
      <button v-if="isPart">已报名成功</button>-->

      <button v-if="isPart">已报名成功</button>
      <button v-if="!isPart && status === 'ON_REGISTER'" class="onlyBtn" @click="goApply(id)">立即报名</button>
      <button v-if="status === 'ACTIVITY_END'">活动已结束</button>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex';
import { activeDetail, partIn, info } from '@/api/api';
export default {
  props: {},
  data () {
    return {
      status: '',
      content: '',
      isPart: '',
      id: '',
      partDate: {
        address: ''
      },
      isshowCIty: true,
      currentCity: '',
      userInfo: {
        identity: null
      }
    };
  },
  // computed: {
  //   ...mapGetters(['userInfo'])
  // },
  created () {},
  onShow () {
    this.getInfo();
  },
  mounted () {
    // 获取定位地址
    this.id = this.$mp.query.classifyId;
    this.getActiveDetail(this.$mp.query.classifyId);
    this.again_getLocation();
    // this.getInfo();
    console.log('userInfouserInfo', this.userInfo);
  },
  watch: {},
  methods: {
    again_getLocation () {
      let that = this;
      // 获取位置信息
      wx.getSetting({
        success: res => {
          console.log(res);
          if (
            res.authSetting['scope.userLocation'] !== undefined &&
            res.authSetting['scope.userLocation'] !== true
          ) {
            // 非初始化进入该页面,且未授权
            wx.showModal({
              title: '是否授权当前位置',
              content:
                '需要获取您的地理位置，请确认授权，否则无法获取您所需数据',
              success: function (res) {
                console.log(res);
                if (res.cancel) {
                  that.isshowCIty = false;
                  wx.showToast({
                    title: '授权失败',
                    icon: 'success',
                    duration: 1000
                  });
                } else if (res.confirm) {
                  wx.openSetting({
                    success: function (dataAu) {
                      console.log(dataAu);
                      if (dataAu.authSetting['scope.userLocation'] === true) {
                        wx.showToast({
                          title: '授权成功',
                          icon: 'success',
                          duration: 1000
                        });
                        that.isshowCIty = true;
                        // 再次授权，调用getLocationt的API
                        that.getLocation();
                      } else {
                        wx.showToast({
                          title: '授权失败',
                          icon: 'success',
                          duration: 1000
                        });
                      }
                    }
                  });
                }
              }
            });
          } else if (res.authSetting['scope.userLocation'] === undefined) {
            // 初始化进入
            that.getLocation(that);
          } else {
            // 授权后默认加载
            that.getLocation(that);
          }
        }
      });
    },
    getLocation () {
      var that = this;
      wx.getLocation({
        type: 'wgs84',
        success (res) {
          // console.log('定位地址', res);
          const latitude = res.latitude;
          const longitude = res.longitude;
          that.loadCity(longitude, latitude);
        }
      });
    },

    /** 获取用户信息 */
    async getInfo () {
      await info().then(res => {
        this.userInfo = res;
        // this.userInfo.identity = res.identity;
      });
    },
    // 获取活动详情信息并展示对应窗口栏
    async getActiveDetail (id) {
      wx.showLoading({
        title: '加载中',
        icon: 'none',
        mask: true
      });
      await activeDetail(id).then(res => {
        wx.hideLoading();
        this.content = res.activity.content;
        this.status = res.activity.activityStatus;
        this.isPart = res.part;
        if (this.isPart) {
          wx.setNavigationBarTitle({
            title: '活动详情（已报名）'
          });
        }
        if (!this.isPart && this.status === 'ON_REGISTER') {
          wx.setNavigationBarTitle({
            title: '活动详情'
          });
        }
        if (this.status === 'ACTIVITY_END') {
          wx.setNavigationBarTitle({
            title: '活动详情（已结束）'
          });
        }

        // NOT_START.未开始,ON_REGISTER.报名中,REGISTER_END.报名结束,ONGOING.进行中,ACTIVITY_END.活动结束" -
        // if (res.activity.activityStatus === 'ACTIVITY_END') {
        //   wx.setNavigationBarTitle({
        //     title: '活动详情（活动结束）'
        //   });
        // }
        // if (res.activity.activityStatus === 'NOT_START') {
        //   wx.setNavigationBarTitle({
        //     title: '活动详情（未开始）'
        //   });
        // }
        // if (res.activity.activityStatus === 'ON_REGISTER') {
        //   wx.setNavigationBarTitle({
        //     title: '活动详情（报名中）'
        //   });
        // }
        // if (res.activity.activityStatus === 'REGISTER_END') {
        //   wx.setNavigationBarTitle({
        //     title: '活动详情（报名结束）'
        //   });
        // }
        // if (res.activity.activityStatus === 'ONGOING') {
        //   wx.setNavigationBarTitle({
        //     title: '活动详情（进行中）'
        //   });
        // }
      });
    },
    // 跳转到报名页面
    async goApply (id) {
      if (this.userInfo) {
        if (!this.userInfo.reg) {
          wx.navigateTo({
            url: '/pages/index/children/register/main'
          });
          return true;
        }
        if (!this.userInfo.realName) {
          wx.navigateTo({
            url: '/pages/PersonalCenter/userChildren/verified/main'
          });
          return true;
        }
      }
      if (!this.isshowCIty) {
        this.again_getLocation();
        return false;
      } else {
        await partIn(id, this.partDate).then(res => {
          if (!res.code) {
            wx.redirectTo({
              url: `/pages/index/children/activeApplySuss/main?classifyId=${id}`
            });
          }
        });
      }
    },
    // 请求百度地图接口解析经纬度（报名时获取用户当前所在城市）
    loadCity (longitude, latitude) {
      var that = this;
      wx.request({
        url:
          'https://api.map.baidu.com/reverse_geocoding/v3/?ak=fQkowBWpv9cro7414L78nWdnwU36pF4B&location=' +
          latitude +
          ',' +
          longitude +
          '&output=json',
        data: {},
        header: {
          'Content-Type': 'application/json'
        },
        success (res) {
          that.partDate.address =
            res.data.result.addressComponent.province +
            ' ' +
            res.data.result.addressComponent.city;
        },
        fail: function () {
          that.currentCity = '获取定位失败';
        }
      });
    }
    // onLoad (options) {
    //   console.log(options.$mp.query.status);
    // }
  },
  components: {}
};
</script>

<style scoped lang="less">
.content {
  margin: 0 15px 52px;
  font-size: 14px;
  img {
    border-radius: 5px !important;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  button {
    border-radius: 2px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 500;
    line-height: 42px;
    margin: 0 15px 6px;
    background: rgba(161, 189, 201, 1);
    color: rgba(255, 255, 255, 1);
  }
  .onlyBtn {
    background: rgba(24, 119, 152, 1);
    color: rgba(255, 255, 255, 1);
  }
}
</style>
